<template>
    <div id="dmol">
        <public v-if="imgData" src="/static/3dmol/public.js"></public>
        <div role="main">
            <div class="content-container">
                <div class="content-header d-sm-flex align-items-center">
                    <h1 class="align-self-center mr-auto">{{title}}</h1>
                </div>
                <div class="general-content">
                    <div class="structure-viewer">
                        <d-mol v-if="imgData" src="/static/3dmol/3Dmol-nojquery-min.js"></d-mol>
                        <div class="viewer_3Dmoljs center-block" data-backgroundcolor="0xffffff" data-element="input-data" data-style="stick:radius=0.1;sphere:scale=0.2" data-type="sdf" id="moldbi-3dmol" style="height: 400px; width: 600px; position: relative; border: 1px solid silver;"></div>
                    </div>
                    <textarea id="input-data" style="display: none"> 123631
  -OEChem-10051719123D

{{imgData}}
                    </textarea>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'dmol',
    data() {
        return {
            title:"",
            imgData: "",
            fileName:""
        }
    },
    props:["molName","drugId"],
    methods: {
        readFile() {
            $ajax.get("/static/txt/"+this.fileName+".txt").then((res) => {
                if (this.imgData != res.data) {
                    this.imgData = res.data;
                }
            })
        }
    },
    components:{
        "public":{
            render: function (createElement) {
                return createElement('script', {
                    attrs: {
                        type: 'text/javascript',
                        src: this.src
                    }
                })
            },
            props:["src"]
        },
        "dMol":{
            render: function (createElement) {
                return createElement('script', {
                    attrs: {
                        type: 'text/javascript',
                        src: this.src
                    }
                })
            },
            props:["src"]
        }
    },
    watch:{
        molName:function(val){
            this.title = val;
            this.readFile();
        },
        drugId:function(val){
            this.fileName = val;
            this.readFile();
        }
    },
    mounted() {
        this.title = this.molName;
        this.fileName = this.drugId;
        this.readFile();
    },
}
</script>
